
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <script type="text/javascript" src="${ctx }/res/hplus/js/jquery.min.js"></script>
    <title>软装到家</title>
    <style>
    	a {
    		cursor:pointer;
    	}
    </style>
</head>
<body>
 
<%@include file="../head.jsp" %> 
 
<div class="w-1200 margin-0-auto">
    <div class="crumbsbar">
        <c:if test="${not empty currentCategory.parentCategory.parentCategory  }">
        <div class="crumbsbar-item">${currentCategory.parentCategory.parentCategory.name }</div>
        <div class="crumbs-arrow">&gt;</div>
        </c:if>
        
        <c:if test="${not empty currentCategory.parentCategory  }">
        <div class="crumbsbar-item">${currentCategory.parentCategory.name }</div>
        <div class="crumbs-arrow">&gt;</div>
        </c:if>
        
        <div class="crumbsbar-item active">${currentCategory.name }</div>
    </div>
</div>
<!--搜索结果-->
<div class="w-1200 margin-0-auto">
    <div class="search-matches-sum">
        <span class="current-key">${currentCategory.name }</span>
        <span>商品筛选</span>
        <%-- <span>共${page.totalRecords }个商品</span> --%>
    </div></div>
<!--品牌类目选择-->
<div class="w-1200 margin-0-auto clear">
    <div class="selector">
        <div class="s-line">
            <div class="sl-wrap">
                <div class="sl-key"><span>品牌:</span></div>
                <div class="sl-value" style="padding-bottom: 5px;">
                    <div class="sl-v-list s-brand-list js-s-brand-list">
                        <ul id="brandUl">
                                <c:forEach items="${brands }" var="b">
                                <c:set var="brandClass" value="" />
                                <c:choose>
                                	<c:when test="${dto.brandIds != null && fn:length(dto.brandIds) > 0 }">
                                		<c:forEach items="${dto.brandIds }" var="sb" varStatus="sbs">
                                			<c:if test="${sb == b.id }">
                                				<c:set var="brandClass" value="selected" />
                                			</c:if>
                                		</c:forEach>
                                	</c:when>
                                </c:choose>
	                                <li>
	                                	<a class='js-brand-item ${brandClass }' data-brand-id="${b.id }"
	                                       data-brand-name="${b.name }"><img
	                                        src="${b.image }" style="width:114px;height:48px;padding:0px;">${b.name }</a>
	                                </li>
                                </c:forEach>
                        </ul>
                        <div class="selected-brand">
                            <span class="sb-name">已选：</span>
                            <div class="selected-brand-list js-selected-brand-list">
                            </div>
                            <!-- <p class="text-center">
                                <button class="btn btn-xs btn-primary inline" onclick="queryList(this);">确定</button><button class="btn btn-xs btn-white inline" onclick="cancelBrands(this);">取消</button>
                            </p> -->
                        </div>
                    </div>
                    <div class="sl-ext">
                        <a class="sl-e-more js-sl-more" href="javascript:;">更多<i></i></a>
                    </div>
                    <p class="text-center">
                         <button class="btn btn-xs btn-primary inline" onclick="queryList(this);">确定</button><button class="btn btn-xs btn-white inline" onclick="cancelBrands(this);">取消</button>
                    </p>
                </div>
            </div>
        </div>
        
        <div class="s-line">
            <div class="sl-wrap">
                <div class="sl-key"><span>价格:</span></div>
                <div class="sl-value">
                    <div class="sl-v-list">
                        <ul id="priceUl">
                            <li><a onclick="query(this);" data-price-start="" data-price-end="">全部</a></li>
                            <li><a onclick="query(this);" data-price-start="0" data-price-end="2500">0-2500</a></li>
                            <li><a onclick="query(this);" data-price-start="2501" data-price-end="5000">2501-5000</a></li>
                            <li><a onclick="query(this);" data-price-start="5001" data-price-end="7500">5001-7500</a></li>
                            <li><a onclick="query(this);" data-price-start="7501" data-price-end="10000">7501-10000</a></li>
                            <li><a onclick="query(this);" data-price-start="10000" data-price-end="">10000以上</a></li>
                            <div class="search-price-box">
                                <label class="search-price">￥<input value="<fmt:formatNumber value="${dto.startPrice }" type="currency" pattern="0"/>" /></label>-
                                <label class="search-price">￥<input value="<fmt:formatNumber value="${dto.endPrice }" type="currency" pattern="0"/>"/></label>
                                <span class="btn btn-default price-submit" onclick="queryByPrice(this);">确定</span>
                            </div>
                        </ul>
                    </div>
                </div>
                <div class="sl-ext">
                </div>
            </div>
        </div>
        
        <c:forEach items="${tags }" var="t">
        <c:if test="${not (t.name eq '价格' or t.name eq '品牌' )}">
        <div class="s-line">
            <div class="sl-wrap">
                <div class="sl-key"><span>${t.name }:</span></div>
                <div class="sl-value">
                    <div class="sl-v-list">
                        <ul>	
                       		<c:forEach items="${t.valueList }" var="v">
                               	<li>
                               		<c:choose>
                               		<c:when test="${filterMap[t.name] == v }">
                               			<a href="javascript:void(0);" class="active" onclick="query(this);">${v }</a>
                               		</c:when>
                               		<c:otherwise>
                               			<a href="javascript:void(0);" onclick="query(this);">${v }</a>
                               		</c:otherwise>
                               		</c:choose>
                               	</li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <div class="sl-ext">
                </div>
            </div>
        </div>
        </c:if>
        </c:forEach>
    </div>
</div>

<!-- 查询条件表格 -->
<form id="query-form">
</form>

<script>
	function sortBy(num,obj) {
		$(obj).parent().find("span").removeClass("active");
		$(obj).addClass("active");
		var url = '${ctx}/product/list?productCategory.id=${currentCategory.id}&name=${dto.name}&liveDirect=${liveDirect}';
		url += "&filters=" + getFilters();
		location = encodeURI(url);
	}
	
	function getSortTypeParam() {
		var selected = $('#sorttypes .active');
		var value = '';
		if(selected != null && selected.length > 0) {
			var theSpan = $(selected[0]);
			var data = theSpan.data();
			var sortId = data.sortId;
		}
		return "&sortType="+data.sortId;
	}

	function queryByPrice(obj) {    //根据价格查询
		$('#priceUl li a').removeClass("active");
		var url = '${ctx}/product/list?productCategory.id=${currentCategory.id}&name=${dto.name}&liveDirect=${liveDirect}';
		url += "&filters=" + getFilters();
		var priceInput = $(obj).parent().find("label input");
		var starts = $(priceInput[0]).val();
		var ends = $(priceInput[1]).val();
		url += "&startPrice="+starts+"&endPrice="+ends;
		location = url;
	}
	
	function queryList(obj) {
		var url = '${ctx}/product/list?productCategory.id=${currentCategory.id}&name=${dto.name}&liveDirect=${liveDirect}';
		url += "&filters=" + getFilters();
		location = encodeURI(url);
	}
	
	function getBrandsUrl() {   //得到选择的品牌信息
		var theSelected = $('#brandUl li a.selected');
		var str = '';
		for(var i = 0;i < theSelected.length;i ++ ) {
			var theA = theSelected[i];
			var data = $(theA).data();
			str += data.brandId+';';
		}
		return "&brandInfo="+str;
	}
	
	function getFilters() {
		var params = "";
		var otherParams = "";
		$('.s-line').each(function() {
			var selectedUl = $(this).find("li a.active");
			if(selectedUl != null && selectedUl.length > 0) {
				var k = $(this).find('div.sl-key span').text();
				k = k.replace(':', '');
				if(k == '价格') {
					var data = $(selectedUl[0]).data();
					var startPrice = data.priceStart;
					var endPrice = data.priceEnd;
					otherParams += "&startPrice="+startPrice+"&endPrice="+endPrice;
				} else if(k != '品牌') {
					var v = $(selectedUl[0]).text();
					params += ";" + k + ":" + v;
				}
			}
			//品牌，可以多选
		});
		return params+otherParams+getBrandsUrl()+getSortTypeParam();
	}
	
	function query(a) {
		var url = '${ctx}/product/list?productCategory.id=${currentCategory.id}&name=${dto.name}&liveDirect=${liveDirect}';
		if($(a).hasClass('active')) {
			$(a).removeClass('active');
		} else {
			var v = $(a).text();
			$(a).parents("ul").find("li a").removeClass("active");
			$(a).addClass('active');
			url += "&filters=" + getFilters();
			location = encodeURI(url);
		}
	}
	
	function cancelBrands(obj) {
		//$('#brandUl li a').removeClass('selected');
		var target = $('.js-s-brand-list');
		target.removeClass("expand");
		list.updateSelectBrands();  //刷新
	}
</script>

<!--商品列表-->
<div class="w-1200 margin-0-auto clear">
    <div class="w-1200 goods-list-title" id="sorttypes">
        <!-- <span class="order-by active">人气</a></span>
        <span class="order-by"><a onclick="sortBy(2);">销量</a></span>
        <span class="order-by orderby-desc"><a onclick="sortBy(3);">新品</a></span>
        <span class="order-by orderby-asc"><a onclick="sortBy(4);">价格</a></span> -->
        <c:forEach items="${sortTypes }" var="s" varStatus="ss">
        	<c:choose>
        		<c:when test="${sortType == null and ss.index == 0 }">
        			<span class="order-by active" onclick="sortBy(${s.value},this);" data-sort-id="${s.value }" data-sort-name="${s.remark }"><a>${s.remark }</a></span>
        		</c:when>
        		<c:when test="${sortType != null and sortType == s.value }">
        			<span class="order-by active" onclick="sortBy(${s.value},this);" data-sort-id="${s.value }" data-sort-name="${s.remark }"><a>${s.remark }</a></span>
        		</c:when>
        		<c:otherwise>
        			<span class="order-by" onclick="sortBy(${s.value},this);" data-sort-id="${s.value }" data-sort-name="${s.remark }"><a>${s.remark }</a></span>
        		</c:otherwise>
        	</c:choose>
        </c:forEach>
        <span class="order-price">
            <label class="search-price">￥<input /></label>-<label class="search-price">￥<input /></label>
        </span>
        <%-- <span class="fr"><i class="i-num">${page.page}/${page.totalPages }</i><i class="i-prev active">&lt;</i><i class="i-next">&gt;</i></span> --%>
    </div>
    <div class="goods-list">
        <ul>
                <c:forEach items="${products }" var="p">
               <li>
                    <a href="${ctx }/product/detail?id=${p.id}" target="_blank">
                        <div class="goods-img">
                        	<%-- <c:choose>
                        		<c:when test="${p.firstSpec.imageList != null && fn:length(p.firstSpec.imageList) > 0 }">
                        			<img src="${p.firstSpec.imageList[0] }" />
                        		</c:when>
                        		<c:otherwise> --%>
                        			<img src="${p.headImage }" />
                        		<%-- </c:otherwise>
                        	</c:choose> --%>
                        </div>
                        <div class="goods-info">
                            <p class="price">
                                	￥<fmt:formatNumber value="${p.minPrice }" type="currency" pattern="0.00"/>
                            </p>
                            <p class="desc">
                                ${p.name }
                            </p>
                            <p class="brand-info">
                                <span class="brand-name"><i class="icon icon-san-heng fl">三横</i>${p.brand.name }</span>
                            <span class="fr">
                            <!-- 
                            <i class="icon icon-jin">金</i>
                            <i class="icon icon-fu">服</i>
                            <i class="icon icon-xian">险</i>
                             --> 
                            </span>
                            </p>
                        </div>
                    </a>
                </li>
                </c:forEach>
                <%-- <c:forEach items="${specs }" var="s">
                <li>
                    <a href="${ctx }/product/detail?id=${s.product.id}&specificationId=${s.id}">
                        <div class="goods-img">
                        	<c:choose>
                        		<c:when test="${s.imageList != null && fn:length(s.imageList) > 0 }">
                        			<img src="${s.imageList[0] }" />
                        		</c:when>
                        		<c:otherwise>
                        			<img src="${s.product.headImage }" />
                        		</c:otherwise>
                        	</c:choose>
                        </div>
                        <div class="goods-info">
                            <p class="price">
                                ￥<fmt:formatNumber value="${s.realPrice }" type="currency" pattern="0.00"/>
                            </p>
                            <p class="desc">
                                ${s.product.name }
                            </p>
                            <p class="brand-info">
                                <span class="brand-name"><i class="icon icon-san-heng fl">三横</i>${s.product.brand.name }</span>
                            <span class="fr">
                            <!-- 
                            <i class="icon icon-jin">金</i>
                            <i class="icon icon-fu">服</i>
                            <i class="icon icon-xian">险</i>
                             --> 
                            </span>
                            </p>
                        </div>
                    </a>
                </li>
                </c:forEach> --%>
        </ul>
    </div></div>
<%@include file="../page.jsp" %>
<%@include file="../foot.jsp" %>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script type="text/javascript">
	function gotoPage(pageNum,category) {   //跳转到指定页面
		location=encodeURI("${ctx}/product/list?productCategory.id="+category+"&name=${dto.name}&page="+pageNum+"&filters=" + getFilters() + "&liveDirect=${liveDirect}");
	}
	
	function contentSearch(value) {
		location=encodeURI("${ctx}/product/list?productCategory.id="+category+"&name="+value + "&liveDirect=${liveDirect}");
	}
	
	function initPrice(startPrice,endPrice) {  //初始化价格参数
		//if(startPrice != '' &&  endPrice != '') {
			var lis = $('#priceUl li a');
			for(var i = 0;i < lis.length;i ++ ) {
				var data = $(lis[i]).data();
				var startPrice1 = data.priceStart;
				var endPrice1 = data.priceEnd;
				if(startPrice == startPrice1 && endPrice == endPrice1) {
					$(lis[i]).addClass('active');
					break;
				}
			}
		//}
	}
	
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
        initPrice('<fmt:formatNumber value="${dto.startPrice }" type="currency" pattern="0"/>','<fmt:formatNumber value="${dto.endPrice }" type="currency" pattern="0"/>');
    }); 
</script>
</body>
</html>

